.main-page {
  padding: 20rpx;
  box-sizing: border-box;
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 400rpx;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    border-radius: 0 0 50% 50%;
    z-index: 1;
  }
}

// 头像容器
.avatar-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60rpx 0 40rpx;
  position: relative;
  z-index: 2;

  .avatar-wrapper {
    position: relative;
    width: 300rpx;
    height: 300rpx;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 
      0 20rpx 40rpx rgba(0, 0, 0, 0.15),
      0 8rpx 16rpx rgba(0, 0, 0, 0.1),
      inset 0 1rpx 0 rgba(255, 255, 255, 0.2);
    border: 6rpx solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;

    &:hover {
      transform: translateY(-8rpx) scale(1.02);
      box-shadow: 
        0 32rpx 64rpx rgba(0, 0, 0, 0.2),
        0 16rpx 32rpx rgba(0, 0, 0, 0.15),
        inset 0 1rpx 0 rgba(255, 255, 255, 0.3);
    }

    &:active {
      transform: translateY(-4rpx) scale(0.98);
    }

    .avatar-image {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
      transition: transform 0.3s ease;
    }

    .avatar-edit {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 80rpx;
      background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.6) 100%);
      display: flex;
      justify-content: center;
      align-items: center;
      backdrop-filter: blur(10rpx);
      transform: translateY(100%);
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    &:hover .avatar-edit {
      transform: translateY(0);
    }
  }
}

// 用户信息容器
.user-info-container {
  margin-bottom: 24rpx;
  position: relative;
  z-index: 2;

  :deep(.user-card) {
    border-radius: 24rpx;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20rpx);
    box-shadow: 
      0 16rpx 32rpx rgba(0, 0, 0, 0.1),
      0 8rpx 16rpx rgba(0, 0, 0, 0.05);
    border: 1rpx solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-4rpx);
      box-shadow: 
        0 24rpx 48rpx rgba(0, 0, 0, 0.15),
        0 12rpx 24rpx rgba(0, 0, 0, 0.08);
    }

    :deep(.wd-card__title) {
      padding: 32rpx 32rpx 20rpx;
      border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
      display: flex;
      align-items: center;
      gap: 12rpx;
      font-weight: 600;
      color: #2c3e50;
    }

    :deep(.wd-card__body) {
      padding: 0;
    }

    :deep(.group) {
      .wd-cell {
        padding: 32rpx;
        border-bottom: 1rpx solid rgba(0, 0, 0, 0.04);
        transition: all 0.2s ease;
        position: relative;
        overflow: hidden;

        &:last-child {
          border-bottom: none;
        }

        &:active {
          background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
          transform: scale(0.98);
        }

        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          width: 4rpx;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          transform: scaleY(0);
          transition: transform 0.3s ease;
        }

        &:hover::before {
          transform: scaleY(1);
        }

        .wd-cell__title {
          font-weight: 500;
          color: #2c3e50;
        }

        .wd-cell__value {
          color: #6c757d;
        }
      }
    }
  }
}

// 账户管理容器
.account-container {
  margin-bottom: 24rpx;
  position: relative;
  z-index: 2;

  :deep(.account-card) {
    border-radius: 24rpx;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20rpx);
    box-shadow: 
      0 16rpx 32rpx rgba(0, 0, 0, 0.1),
      0 8rpx 16rpx rgba(0, 0, 0, 0.05);
    border: 1rpx solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;

    &:hover {
      transform: translateY(-4rpx);
      box-shadow: 
        0 24rpx 48rpx rgba(0, 0, 0, 0.15),
        0 12rpx 24rpx rgba(0, 0, 0, 0.08);
    }

    :deep(.wd-card__title) {
      padding: 32rpx 32rpx 20rpx;
      border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
      display: flex;
      align-items: center;
      gap: 12rpx;
      font-weight: 600;
      color: #2c3e50;
    }

    :deep(.wd-card__body) {
      padding: 0;
    }

    :deep(.group) {
      .wd-cell {
        padding: 32rpx;
        border-bottom: 1rpx solid rgba(0, 0, 0, 0.04);
        transition: all 0.2s ease;
        position: relative;
        overflow: hidden;

        &:last-child {
          border-bottom: none;
        }

        &:active {
          background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
          transform: scale(0.98);
        }

        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          width: 4rpx;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          transform: scaleY(0);
          transition: transform 0.3s ease;
        }

        &:hover::before {
          transform: scaleY(1);
        }

        .wd-cell__title {
          font-weight: 500;
          color: #2c3e50;
        }

        .wd-cell__value {
          color: #6c757d;
        }

        &.danger-cell {
          .wd-cell__title {
            color: #e74c3c;
            font-weight: 600;
          }

          &::before {
            background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
          }

          &:active {
            background: linear-gradient(135deg, #fdf2f2 0%, #fde8e8 100%);
          }
        }
      }
    }
  }
}

// 单元格内容样式
.cell-content {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.cell-text {
  font-size: 28rpx;
  color: #6c757d;
  text-align: right;
  font-weight: 400;
  transition: color 0.2s ease;
}

.cell-input {
  font-size: 28rpx;
  color: #2c3e50;
  text-align: right;
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
  font-weight: 500;
  transition: all 0.2s ease;

  &:focus {
    color: #667eea;
  }
}

// 选择器头部样式
.picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 32rpx;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 24rpx 24rpx 0 0;
}

.picker-cancel,
.picker-confirm {
  font-size: 28rpx;
  color: #6c757d;
  padding: 12rpx 24rpx;
  border-radius: 8rpx;
  transition: all 0.2s ease;
  font-weight: 500;
}

.picker-cancel {
  &:active {
    background: rgba(0, 0, 0, 0.05);
  }
}

.picker-confirm {
  color: #667eea;
  font-weight: 600;

  &:active {
    background: rgba(102, 126, 234, 0.1);
  }
}

.picker-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #2c3e50;
}

// 响应式设计
@media (max-width: 750rpx) {
  .main-page {
    padding: 16rpx;
  }

  .avatar-container {
    padding: 40rpx 0 32rpx;

    .avatar-wrapper {
      width: 280rpx;
      height: 280rpx;
    }
  }

  .user-info-container,
  .account-container {
    :deep(.user-card),
    :deep(.account-card) {
      :deep(.wd-card__title) {
        padding: 24rpx 24rpx 16rpx;
      }

      :deep(.group) .wd-cell {
        padding: 24rpx;
      }
    }
  }
}

// 动画效果
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.user-info-container,
.account-container {
  animation: fadeInUp 0.6s ease-out;
}

.account-container {
  animation-delay: 0.1s;
}

// 加载状态
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  backdrop-filter: blur(4rpx);
}

// 滚动条美化
::-webkit-scrollbar {
  width: 8rpx;
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 4rpx;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 4rpx;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
}